<template>
  <div class="user-login">
    <h1>用户注册</h1>
    <el-form
        ref="form"
        :model="form"
        @submit.native.prevent="handleRegister"
        :rules="rules"
        class="login-form"
        label-width="100px"
    >
      <el-form-item prop="username" label="用户名">
        <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            auto-complete="false"
        />
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            auto-complete="false"
            @input="restRpass"
            prefix-icon="el-icon-lock"
        />
      </el-form-item>
      <el-form-item prop="confirmPassword" label="确认密码">
        <el-input
            v-model="form.confirmPassword"
            type="password"
            placeholder="请确认密码"
            auto-complete="false"
            prefix-icon="el-icon-lock"
        />
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-input
            v-model="form.email"
            placeholder="请输入用户名"
            prefix-icon="el-icon-message"
            auto-complete="false"
        />
      </el-form-item>
      <el-form-item prop="phone" label="手机号码">
        <el-input
            v-model="form.phone"
            placeholder="请输入用户名"
            prefix-icon="el-icon-phone"
            auto-complete="false"
        />
      </el-form-item>
      <el-button
          type="primary"
          native-type="submit"
          :loading="loading"
          class="login-button"
      >
        注册
      </el-button>
    </el-form>
    <el-button
        type="text"
        @click="$router.push('/login')"
        class="admin-login-button"
    >
      已有账号？去登录
    </el-button>
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
  </div>
</template>

<script>
import axios from "axios";
import {userRegister} from "@/api/userApi";

export default {
  name: "UserLogin",
  data() {
    let emailPatther = /^\w+@\w+\.com+$/;
    let phonePatther = /^1[3-9]\d{9}$/;
    let passPatther = /[^\s\r\n]{6,18}$/;
    return {
      form: {
        username: "",
        password: "",
        email: "",
        phone: "",
        confirmPassword: "",
        roleId: 1,
      },
      loading: false,
      errorMessage: "",
      rules: {
        username: [
          {required: true, message: "用户名不能为空", trigger: "blur"},
        ],
        password: [
          {required: true, message: "密码不能为空", trigger: "blur"},
          {
            pattern: passPatther,
            message: "长度大于等于6位小于等于18位,不包含回车空格换行",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {required: true, message: "请确认密码", trigger: "blur"},
          {validator: this.checkConfirmPassword, trigger: "blur"},
        ],
        email: [
          {required: false},
          {
            pattern: emailPatther,
            message: "邮箱不格式不正确，必须包含@**.com",
            trigger: "blur",
          },
        ],
        phone: [
          {required: false},
          {
            pattern: phonePatther,
            message: "手机号格式不正确",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
  },
  methods: {
    checkConfirmPassword(rule, value, callback) {
      if (this.form.password !== this.form.confirmPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    restRpass() {
      this.form.confirmPassword = "";
    },
    handleRegister() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const _this = this;
          _this.loading = true;
          _this.errorMessage = "";
          userRegister(this.form)
              .then(() => {
                this.$message.success("注册成功！")
                // if (response.data.code === 200) {
                this.$router.push({name: "UserLogin"});
                // } else {
                //   // _this.errorMessage = response.data.message;
                //   this.$message({
                //     showClose: true,
                //     message: response.data.message,
                //     type: "error",
                //   });
                // }
              })
              .catch(function () {
                _this.errorMessage = "注册失败";
              })
              .finally(function () {
                _this.loading = false;
              });
        } else {
          this.$message({
            showClose: true,
            message: "表单填写有误，请检查后再试",
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.user-login {
  max-width: 400px;
  margin: 50px auto;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.user-login h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.login-form {
  display: flex;
  flex-direction: column;
}

.login-form .el-form-item {
  margin-bottom: 15px;
}

.login-button {
  width: 100%;
  margin-top: 10px;
}

.admin-login-button {
  margin-top: 10px;
  text-align: center;
  color: #409eff;
  cursor: pointer;
}

.admin-login-button:hover {
  text-decoration: underline;
}

.error-message {
  color: red;
  margin-top: 10px;
  text-align: center;
}
</style>